<template>
  <view class="container">
    <template v-if="remarkLogList && remarkLogList.length > 0">
      <view class="item" v-for="record in remarkLogList" :record="record" :key="record.id">
        <view class="title">{{ record.operateTypeName }}</view>
        <view class="content">{{ record.operateLog || '暂无备注信息' }}</view>
        <view class="footer">
          <text class="mr"> {{ record.createUserName }}</text>
          <text> {{ record.createTime }}</text>
        </view>
      </view>
    </template>
    <text class="no-remark" v-else>暂无备注</text>
  </view>
</template>

<script setup>
  import { onLoad } from '@dcloudio/uni-app'
  import { ref, onMounted } from 'vue'
  import { getRemarkLogApi } from '@/api/order/sOrder'

  const queryParam = ref({})
  const remarkLogList = ref([])

  const getRemarkLog = () => {
    getRemarkLogApi({
      id: queryParam.value.id,
    }).then((res) => {
      if (res.code == 200) {
        remarkLogList.value = res.result
      }
    })
  }

  onLoad((record) => {
    queryParam.value.id = record.id
    if (record.id) {
      getRemarkLog()
    }
  })
</script>

<style lang="less" scoped>
  .container {
    padding: 24rpx 0 100rpx;
    .item {
      width: 94%;
      margin: 0 auto 24rpx;
      border-radius: 8rpx;
      background: #fff;
      padding: 32rpx;
      .title {
        font-size: 30rpx;
        color: rgba(0, 0, 0, 0.85);
        font-weight: 600;
      }
      .content {
        margin: 8rpx 0 16rpx;
        font-size: 30rpx;
        font-weight: 400;
        color: rgba(0, 0, 0, 0.85);
        line-height: 44rpx;
        word-break: break-all;
      }
      .footer {
        font-size: 26rpx;
        color: #8491a8;
      }
      .mr {
        margin-right: 24rpx;
      }
    }
    .no-remark {
      margin: 100rpx 0;
      text-align: center;
    }
  }
</style>
